<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>

<!-- ------------------------------------------------------------ -->
<!-- ************************************************************ -->
<!-- * Graphics and xhtml/css code                              * -->
<!-- * Copyright (c) 2007, Ondrej Pohorsky  All rights reserved * -->
<!-- *                                                          * -->
<!-- * author: Ondrej Pohorsky                                  * -->
<!-- * url:    http://www.poho.cz                               * -->
<!-- * mail:   poho@poho.cz                                     * -->
<!-- * icq:    190484844                                        * -->
<!-- *                                                          * -->
<!-- * This work is under BSD license                           * -->
<!-- ************************************************************ -->
<!-- ------------------------------------------------------------ -->

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<title>Table as list</title>
<meta name="author" content="Ondrej Pohorsky; http://www.poho.cz; poho@poho.cz" />

<script type="text/javascript" src="../design/js/javascript.js"></script>

<link rel="shortcut icon" href="../design/img/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="../design/styles/default.css" media="screen, projection, tv" type="text/css" />
<link rel="stylesheet" href="../design/styles/print.css" media="print" type="text/css" />
</head>
<body>
  <div id="witti">
  
    <div id="header">
      <a href="../index.html" class="logo"><span>Witti</span></a>
      <p class="userinfo"><strong>wellard</strong> | <a href="#">My account</a> | <a href="#">Logout!</a></p>
      <div class="cleaner"></div>
    </div><!-- header -->
    
    <div id="main">
      <div id="menu">
        <ul>
          <li><a href="../index.html">Introduction</a></li>
          <li><a href="../parts.html" class="active">Parts</a>
            <ul>
              <li><a href="../parts/text.html">Text</a></li>
              <li><a href="../parts/lists.html">Lists</a></li>
              <li><a href="../parts/table-list.html" class="active">Table as list</a></li>
              <li><a href="../parts/table-info.html">Info table</a></li>
              <li><a href="../parts/form.html">Form</a></li>
              <li><a href="../parts/messages.html">Messages</a></li>
              <li><a href="../parts/separate-columns.html">Separate columns</a></li>
              <li><a href="../parts/gallery.html">Gallery</a></li>
            </ul>
          </li>
          <li><a href="../licence.html">Licence</a></li>
        </ul>
      </div><!-- content -->
      <div id="content">
        <h1>Table as list</h1>

        <p>
          When you want to create striped table (<em>e.g. using PHP</em>) you don`t need to write <em>class="even"</em>
          to every even line of table. It is because <strong>Witti</strong> includes JavaScript feature which automatically
          do it. I want to thank to <a href="http://www.wellstyled.com/">WellStyled.com</a> for this solution.
        </p>
        
        <!-- Table has ID "list" because of JS striping -->
        <table id="list">
          <tr>
            <th class="left">Name</th>
            <th>Pet</th>
            <th>Favourite writer</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
          </tr>
          <tr>
            <td class="left"><a href="#">Andy Wellard</a></td>
            <td>Humster</td>
            <td>Ernest Hemingway</td>
            <td><a href="#"><strong>edit</strong></a></td>
            <td><a href="#"><strong>delete</strong></a></td>
          </tr>
          <tr>
            <td class="left"><a href="#">Andy Wellard</a></td>
            <td>Humster</td>
            <td>Ernest Hemingway</td>
            <td><a href="#"><strong>edit</strong></a></td>
            <td><a href="#"><strong>delete</strong></a></td>
          </tr>
          <tr>
            <td class="left"><a href="#">Andy Wellard</a></td>
            <td>Humster</td>
            <td>Ernest Hemingway</td>
            <td><a href="#"><strong>edit</strong></a></td>
            <td><a href="#"><strong>delete</strong></a></td>
          </tr>
          <tr>
            <td class="left"><a href="#">Andy Wellard</a></td>
            <td>Humster</td>
            <td>Ernest Hemingway</td>
            <td><a href="#"><strong>edit</strong></a></td>
            <td><a href="#"><strong>delete</strong></a></td>
          </tr>
          <tr>
            <td class="left"><a href="#">Andy Wellard</a></td>
            <td>Humster</td>
            <td>Ernest Hemingway</td>
            <td><a href="#"><strong>edit</strong></a></td>
            <td><a href="#"><strong>delete</strong></a></td>
          </tr>
        </table>
        
        <p class="center">
          <a href="#">&lt; previous</a> 4 / <strong>56</strong> <a href="#">next &gt;</a>
        </p>
        
        <div class="print">
          <a href="javascript:print()"><em>Print this page</em></a>
        </div>
      </div><!-- content -->
      <div class="cleaner"></div>
    </div><!-- main -->
    
    <div id="footer">
      <p>design: <a href="http://www.poho.cz/">Ondřej Pohorský</a></p>
    </div><!-- footer -->
  
  </div><!-- witti -->
</body>
</html>
